<template>
  <div class="form_style">
    <h3>表单数据验证</h3>
    <y-form :model="formValidate" :rules="ruleValidate" ref='form'>
      <y-form-item label="用户名" prop="name">
        <y-input v-model="formValidate.name"></y-input>
      </y-form-item>
      <y-form-item label="邮箱" prop="mail">
        <y-input v-model="formValidate.mail"></y-input>
      </y-form-item>
    </y-form>
    <div style="margin-top:10px;">
      <button class="btn1" @click="handleSubmit">提交</button>
      <button class="btn2" @click="handleReset">重置</button>
    </div>
  </div>
</template>

<script>
import yForm from "common/form/yForm";
import yFormItem from "common/form/yFormItem";
import yInput from "common/form/yInput";

export default {
  name: "TestForm",
  components: {
    yForm,
    yFormItem,
    yInput,
  },

  data() {
    return {
      formValidate: {
        name: "",
        mail: "",
      },
      ruleValidate: {
        name: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
        mail: [
          { required: true, message: "邮箱验证不能为空", trigger: "blur" },
          { type: "email", message: "邮箱格式不正确", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          window.alert("提交成功");
        } else {
          window.alert("表单校验失败");
        }
      });
    },
    handleReset() {
      this.$refs.form.resetFields();  //通过循环逐一调用 yFormItem 的 resetField 方法来重置数据。
    },
  },
};
</script>

<style lang='scss' scoped>

.form_style {
  width: 200px;
  margin: 20px;
  padding: 20px;
  border: 1px solid #111;
  h3 {
    font-size: 16px;
    font-weight: 700;
  }
}
.btn1 {
  padding: 6px 14px;
  font-size: 15px;
  border-radius: 2px;  
  color: #fff;
  background-color: #409eff;
  &:hover {
    cursor: pointer;
    box-shadow: 0 0 5px 0.05px #c2c2c2;
  }
}
.btn2 {
  @extend .btn1;
  background-color:#909399;
}
.btn1 + .btn2 {
  margin-left: 20px;
}
</style>